<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生基本信息管理</title>
    <script src="../sys/vue.min.js"></script>
    <style>
        table#stu{
            width: 100%;
            height: 100%;;
            align-content:center;           
            border: 2px solid black;
        }
        table#stu tr{
            height: 50px;
        }
        table#stu tr td{
            border: 1px solid #877777;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 style="color:brown; text-align: center;">学生基本信息管理</h2>
        <hr width="100%" />
        <br />

        学号：<input style="width:100px;" v-model="no" type="text" value="" />
        姓名：<input style="width:50px;"  v-model="name" type="text" value="" />
        性别：<select v-model="sex">
                    <option value="男">男</option>
                    <option value="女">女</option>   
            </select>
        生日：<input style="width:60px;"  v-model="birth" type="text" value="" />
        班级：<select v-model="iclass">
                <option value="信息20-1班">信息20-1班</option>
                <option value="信息20-2班">信息20-2班</option>   
            </select>
        住所：<input style="width:100px;"  v-model="address" type="text" value="" />
        <input ref="add" type="button" @click="addStu()" value="新增" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input v-model="txtsearch" type="text" />
        <input ref="search" type="button" @click="searchStu()" value="搜索" />

        <br /><br />
        <table id="stu" cellpadding="0" cellspacing="0">
            <tr>
                <td>序号</td>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>出身年月日</td>
                <td>班级</td>
                <td>宿舍位置</td>
                <td>操作</td>
            </tr>            
            <tr v-for="(stu, i) in arrStu" :key="stu.no">
                <td>{{i+1}}</td>
                <td>{{stu.no}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.sex}}</td>
                <td>{{stu.birth}}</td>
                <td>{{stu.iclass}}</td>
                <td>{{stu.address}}</td>
                <td>
                    <input type="button" @click="delStu(stu.no)" value="删除" />
                    <input type="button" @click="modStu(stu.no)" value="修改" />
                </td>
            </tr>
        </table>
    </div>
    <script>
        var curStu = -1;
        var vm = new Vue({
            el:"#app",
            data:{
                txtsearch:'',
                arrStu: '',
                arrStu : [
                    {
                        xh:1,
                        no:'20210101',
                        name:'王诗雨',
                        sex:'女',
                        birth:'2001-8-6',
                        iclass:'信息20-1班',
                        address:'12号楼'
                    },
                    {
                        xh:2,
                        no:'20210211',
                        name:'苏俊逸',
                        sex:'男',
                        birth:'2001-7-8',
                        iclass:'信息20-2班',
                        address:'11号楼'
                    },
                    {
                        xh:3,
                        no:'20210115',
                        name:'王琳欣',
                        sex:'女',
                        birth:'2002-3-8',
                        iclass:'信息20-1班',
                        address:'12号楼'
                    },
                    {
                        xh:4,
                        no:'20210116',
                        name:'白艳明',
                        sex:'男',
                        birth:'2002-5-6',
                        iclass:'信息20-2班',
                        address:'11号楼'
                    }
                ],
                no:"",
                name:"",
                sex:"男",
                birth:"",
                iclass:"信息20-1班",
                address:""
            },
            methods: {
                addStu() {
                    if(!(this.no && this.name && this.birth)){
                        alert("学生的学号或者姓名或者生日不能为空！");
                        return false;
                    }
                    if(this.$refs.add.value == "新增"){
                        var s = {
                            xh:this.arrStu.length + 1,
                            no:this.no,
                            name:this.name,
                            sex:this.sex,
                            birth:this.birth,
                            iclass:this.iclass,
                            address:this.address
                        };
                        this.arrStu.push(s);
                        this.no = "";
                        this.name = "";
                        this.sex = "男";
                        this.birth = "";
                        this.iclass = "信息20-1班";
                        this.address = "";
                    }
                    else{
                        var s = {
                            xh:this.arrStu[curStu].xh,
                            no:this.no,
                            name:this.name,
                            sex:this.sex,
                            birth:this.birth,
                            iclass:this.iclass,
                            address:this.address
                        };
                        this.arrStu.splice(curStu,1,s);
                        this.no = "";
                        this.name = "";
                        this.sex = "男";
                        this.birth = "";
                        this.iclass = "信息20-1班";
                        this.address = "";
                        this.$refs.add.value = "新增";
                        this.$refs.add.style.color = "black";
                    }
                },
                delStu(_no){
                    for(var i=0; i<this.arrStu.length;i++){
                        if(this.arrStu[i].no==_no){
                            this.arrStu.splice(i,1);
                            break;
                        }
                    }
                }   , 
                modStu(_no){
                    for(var i=0; i<this.arrStu.length;i++){
                        if(this.arrStu[i].no==_no){
                            this.no = this.arrStu[i].no;
                            this.name = this.arrStu[i].name;
                            this.sex = this.arrStu[i].sex;
                            this.birth = this.arrStu[i].birth;
                            this.iclass = this.arrStu[i].iclass;
                            this.address = this.arrStu[i].address;
                            this.$refs.add.value = "保存";
                            this.$refs.add.style.color = "#0099CC";
                            curStu = i;
                            break;
                        }
                    }
                },       
                searchStu(value){
                    var txtsearch = this.txtsearch;
                    if(txtsearch){
                        this.arrStu = this.arrStu.filter(function(product){
                            console.log(product)
                            return Object.keys(product).some(function(key){
                                console.log(key)
                                return String(product[key]).toLowerCase().indexOf(txtsearch) > -1
                            })
                        })
                    }
                }
            },  
        });
        
    </script>
</body>
</html>